<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Square</title>
</head>
<script src="../libs/raf_polyfill.js"></script>
<script id="shader-vs" type="shader">
	attribute vec3 aVertexPosition;
	
	void main(void){
		gl_Position = vec4(aVertexPosition, 1.0);
	}
</script>
<script id="shader-fs" type="shader">
	void main(void){
		gl_FragColor = vec4(1.0,1.0,1.0,1.0);
	}
</script>
<script>
	var gl = null;
	var program = null;
	var width = 0;
	var height = 0;
	
	var squareVertexBuffer = null;
	var squareIndexBuffer = null;
	
	var indices = [];
	var vertices = [];
	
	function initProgram(){
		var fragmentShader = makeShader(document.getElementById("shader-fs").innerHTML, gl.FRAGMENT_SHADER);
		var vertexShader = makeShader(document.getElementById("shader-vs").innerHTML, gl.VERTEX_SHADER);
		
		program = gl.createProgram();
		gl.attachShader(program, fragmentShader);
		gl.attachShader(program, vertexShader);
		gl.linkProgram(program);
		if (!gl.getProgramParameter(program, gl.LINK_STATUS))
			alert('linking error');
		gl.useProgram(program);
		
		program.vertexPosition = gl.getAttribLocation(program, "aVertexPosition");
	}
	
	function makeShader(src, type){
		var shader = gl.createShader(type);
		gl.shaderSource(shader, src);
		gl.compileShader(shader);
		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
			alert('compile error')
		return shader;
	}
	
	function initBuffers(){
		 vertices = [
			-0.5,0.5,0.0, //Vertex 0
			-0.5,-0.5,0.0, //Vertex 1
			0.5,-0.5,0.0, //Vertex 2
			0.5,0.5,0.0]; //Vertex 3
		
		indices = [3,2,1,3,1,0];
		
		squareVertexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
		
		squareIndexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
		
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
	}
	
	function drawScene(){
		gl.clearColor(0.0, 0.0, 0.0, 1.0);
		gl.enable(gl.DEPTH_TEST);
		
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
		gl.viewport(0, 0, width, height);
		
		gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexBuffer);
		gl.vertexAttribPointer(program.vertexPosition, 3, gl.FLOAT, false, 0, 0);
		gl.enableVertexAttribArray(program.vertexPosition);
		
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, squareIndexBuffer);
		gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0)
	}
	
	function renderLoop(canvas){
		requestAnimationFrame(renderLoop, canvas);
		drawScene();
	}
	
	function runWebGLApp(){
		var canvas = document.getElementById("my-canvas");
		width = canvas.width;
		height = canvas.height;
		try
		{
			gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
		}
		catch (e){}
		initProgram();
		initBuffers();
		renderLoop(canvas);
	}
</script>
<body onload="runWebGLApp()">
<canvas id="my-canvas" width="480" height ="400"> </canvas>
</body>
</html>
